// components/product/productChart/productChart.js
import * as echarts from '../../../ec-canvas/echarts';
const time = require('../../../utils/time.js')

function getOption(chart,data,xData){
  var option = {
    // x轴
    xAxis: {
      type: 'category',//离散型
      data: xData,//数据
    },
    // y轴
    yAxis: {
      type: 'value',
      axisLabel: {
        // show: false
        fontSize: 8
      }
    },
    // 图表距离边框的距离
    grid:{
      top:'10%',
      left:'10%',
      right:'5%',
      bottom:'20%'
    },
    tooltip: {
      trigger: "axis"
    },
    series: [
      {
        data: data,
        type: 'line',
        smooth:true,
        itemStyle:{//小圆圈
          color:"#0879DF"
        },
        lineStyle:{//折线
          color:"#0879DF"
        }
      }
    ]
  };
  chart.setOption(option)
}

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 表格数据
    'chartData':{
      type:Array
    },
    // 日/月/年
    'fields':{
      type:String
    },
    // 日期
    'date':{
      type:String
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 图表
    ecLine:{
      lazyLoad:true
    },
    isLoading:true
   
  },
  //监听器
  observers:{
    'chartData,date':function(chartData,date){
      var xData=[] // 设置横坐标
      switch(this.properties.fields){
        case 'day':
          var day = date.split('-').join('').slice(6,8) // 获取日期
          xData=this.getDateList(day)
          break
        case 'month':
          var month = date.split('-').join('').slice(4,6) // 获取月份
          xData=this.getDateList(month)
          break
        case 'year':
          var year = date.split('-').join('').slice(0,4)// 获取年份
          xData=this.getDateList(year)
          break
      }
      if(chartData.length==xData.length){
        let ecComponent = this.selectComponent('#chart');
        ecComponent.init((canvas,width,height)=>{
          const chart = echarts.init(canvas,null,{
            width:width,
            height:height
          })
          getOption(chart,chartData,xData)
          return chart
        })
      }
      
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    getDateList(date){
      var xData=[]
      if(date.length==2){
        while(date--){
          xData=[date[0]==0?date[1]+1:date+1,...xData]
        }
      }else if(date.length==4){
        var index=5
        while(index--){
          xData=[date,...xData]
          date-=1
        }
      }
      return xData
    }
  }
})
